<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="author" content="http://www.unioncloth.com/" />
	<title>宋老大</title>
	<style type="text/css">
		input {
			width: 150px;
		}
	</style>
	<script src="ssvg.js"></script>
	<script type="text/ECMAScript">
  		var htmlObj,SVGDoc,SVGRoot,viewBox,innerSVG;
  		var svgns="http://www.w3.org/2000/svg";
  		var PartName;
  		function Initialize(){
  			htmlObj = document.getElementById("myembed");
  			if (htmlObj == null){
  				alert("没找到");
  			}
  			//SVGDoc = document.getElementById('myembed').getSVGDocument();
  			SVGDoc = htmlObj.getSVGDocument();
  			if (SVGDoc == null){
  				alert("不成功");
  			}
  			SVGRoot = SVGDoc.documentElement;
  			
  		}//end function Initialize()
  		
  		function treeTravel(el){
  			for (var i=0;i<el.length;i++)
         {
          var xx=el[i].childNodes;
					// 判断是文本节点还是svg子节点
					console.log(xx.length>0)
					if(xx.length>0){
               for (var j=0;j<xx.length;j++)
               {
									if(xx[j].nodeName){
										console.log(xx[j].nodeName)
										switch(xx[j].nodeName)
									{
										case "path":
											classReplace(xx[j]);
											pathReplace(xx[j],-18164.71472,270.75878,6.11134767);
										break;
										case "line":
											classReplace(xx[j]);
											lineReplace(xx[j],-18164.71472,270.75878,6.11134767);
										break;
										case "polyline":
											classReplace(xx[j]);
											polylineRe(xx[j],-18164.71472,270.75878,6.11134767);
										break;
										case "g":
											var yy=xx[j].children;
										// debugger;
											treeTravel(yy);
										break;
										default:
									}
								}
               }
         }
  		}
			}
  		
  		

		
  		function displayPart(part){
  		  
  		  SVGDoc.getElementById(part).setAttribute("display","block");
  		}
				// partImg:替换对象
  		function changePart(partImg){
  			// debugger;
  			var partNode=SVGDoc.getElementById('翻领');
				console.log("特征元素"+partNode);
  			var partParent=partNode.parentNode;
				// 特征呀元素
  			var eigenPath=SVGDoc.getElementById("特征");
				// 特征元素的高宽等位置坐标
  			var eigenRect=eigenPath.getBoundingClientRect();
  			var x1top=eigenRect.top;
  			var x1left=eigenRect.left;
  			var x1bottom=eigenRect.bottom;
  			var x1right=eigenRect.right;
				console.log("替换特征:"+x1top+'-'+x1left+'-'+x1bottom+'-'+x1right);
  			partParent.removeChild(partNode);
				
				// 拷贝立领
  			var rpSVGDoc=partImg.getSVGDocument();
  			var rpNode=rpSVGDoc.getElementById('立领').cloneNode(true);
  			var gObject=document.createElement("g");
  					gObject=rpNode;
  			var success=partParent.appendChild(gObject);
  			
  			var xx=rpNode.childNodes;
  			// debugger;
  			treeTravel(xx);
  			
				// 被替换对象的特征元素位置
  			eigenPath=SVGDoc.getElementById("特征");
  			eigenRect=eigenPath.getBoundingClientRect();
  			var x2top=eigenRect.top;
  			var x2left=eigenRect.left;
  			var x2bottom=eigenRect.bottom;
  			var x2right=eigenRect.right;
				console.log("被替换特征:"+x2top+'-'+x2left+'-'+x2bottom+'-'+x2right);
  			var sx=(x1right-x1left)/(x2right-x2left);
  			var sy=(x1bottom-x1top)/(x2bottom-x2top);
  			var xOffset=x1left-x2left;
  			var yOffset=x1top-x2top;
  			
  		}
  		function choosePart(){
  			var alertword = "换"+PartName+"功能还没开发好，大哥！";
  			if (PartName == "领型") {
  				 //alert(alertword);
  				 var partImg1=document.createElement('img');
  				 partImg1.src='领口1.svg';
  				 //partImg1.onclick=function(){changePart()};
  				 var rongqi=document.getElementById('PartView');
  				 rongqi.appendChild(partImg1);
  				 var partImg2=document.createElement('iframe');
  				 partImg2.src='领口2.svg';
  				 partImg2.height='100';
  				 partImg2.width='100';
  				 //partImg2.type="image/svg+xml";
  				 partImg2.id="立领图";
  				 //partImg2.onclick=function(){changePart()};
  				 rongqi.appendChild(partImg2);
  				 IframeOnClick.track(document.getElementById("立领图"), function() { changePart(partImg2); }); 

  				}
  			else if (PartName == "袖型") {
  				 alert(alertword);
  				}
  			     else if (PartName == "袖衩") {
  				 alert(alertword);
  				}
  				        else if (PartName == "下摆") {
  				 alert(alertword);
  				}
  				             else {
  				 alert("说人话！");
  				}
  		}
var IframeOnClick = {  
    resolution: 2000,  
    iframes: [],  
    interval: null,  
    Iframe: function() {  
        this.element = arguments[0];  
        this.cb = arguments[1];   
        this.hasTracked = false;  
    },  
    track: function(element, cb) {  
        this.iframes.push(new this.Iframe(element, cb));  
        if (!this.interval) {  
            var _this = this;  
            this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);  
        }  
    },  
    checkClick: function() {  
        if (document.activeElement) {  
            var activeElement = document.activeElement;  
            for (var i in this.iframes) {  
                if (activeElement === this.iframes[i].element) { // user is in this Iframe  
                    if (this.iframes[i].hasTracked == false) {   
                        this.iframes[i].cb.apply(window, []);   
                        this.iframes[i].hasTracked = true;  
                    }  
                } else {  
                    this.iframes[i].hasTracked = false;  
                }  
            }  
        }  
    }  
};  
  		 function toDisplay(){
  			if (SVGDoc == null){
  				alert("不成功");
  			}
  			var part = "左前片";
  			displayPart(part);
  			var part1 = "右前片";
        setTimeout(function(){displayPart(part1);},1000);
  			//setTimeout("displayPart("+part1+")",5000);
  			//displayPart(part1);
  			var part2 = "门襟";
  			setTimeout(function(){displayPart(part2);},1000);
  			//displayPart(part2);
  			var part3 = "左口袋";
  			setTimeout(function(){displayPart(part3);},1000);
  			var part4 = "左育克过肩";
  			setTimeout(function(){displayPart(part4);},1000);
  			var part5 = "右育克过肩";
  			setTimeout(function(){displayPart(part5);},1000);
  			var part6 = "左袖前";
  			setTimeout(function(){displayPart(part6);},1000);
  			var part7 = "右袖前";
  			setTimeout(function(){displayPart(part7);},1000);
  			var part8 = "左袖克夫";
  			setTimeout(function(){displayPart(part8);},1000);
  			var part9 = "右袖克夫";
  			setTimeout(function(){displayPart(part9);},1000);
  			var part10 = "翻领";
  			setTimeout(function(){displayPart(part10);},1000);
  			  			
  		}
  		
  		
  	</script>
</head>

<body onload="Initialize()" bgcolor="#EEEEFF">
	<!-- <iframe src="bjt1.svg" height="704.2" width="946"></iframe> -->
	<form action="">
		<table>
			<tr>
				<td>
					<input type="button" onclick="toDisplay()" value="拼合款式图" />

				</td>
			</tr>

			<tr>
				<td>
					<input type="button" onclick="PartName='领型'; choosePart()" value="换领型" />

				</td>
			</tr>

			<tr>
				<td>
					<input type="button" onclick="PartName='袖型'; choosePart()" value="换袖型" />

				</td>
			</tr>

			<tr>
				<td>
					<input type="button" onclick="PartName='袖衩';choosePart()" value="换袖衩" />

				</td>
			</tr>

			<tr>
				<td>
					<input type="button" onclick="PartName='下摆';choosePart()" value="换下摆" />

				</td>
			</tr>

		</table>
		<table width="1000" id="mainView">


			<tr>

				<td align="center">
					<h3>款式描述</h3>
					<h2>标准衬衫</h2>

					<embed id="myembed" width="946" height="704.2" type="image/svg+xml" src="bjt2.svg">

				</td>

			</tr>
			<div
				style="position:absolute;left:180px;top:10px;width:900px;height:120px;border-radius:3px;border:3px solid #EE872A;"
				id="PartView">

			</div>

		</table>



	</form>


</body>

</html>